<template>
  <div>
    <section style="height: 70px"></section>
    <section>
      <div class="container mt-5 mb-5">
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <img :src="state.cake.img" style="width: 100%; height: 100%" />
          </div>
          <div class="col-md-6 info-box">
            <div class="detail_info">
              <div class="name">{{ state.cake.name }}</div>
              <div class="cakeDescribe">{{ state.cake.cakeDescribe }}</div>
              <div class="btns mt-0">
                <div class="price">￥{{ state.cake.price }} / {{ state.cake.size }}寸</div>
              <div class="price">库存&nbsp;&nbsp;&nbsp;{{ state.cake.store }}</div>
              </div>

              <div class="btns">
                <div class="car-btn" @click="goToCart(state.cake)">加入购物车</div>
                <div class="buy-btn" @click="goToOrder(state.cake)">立即购买</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup>
import { reactive, ref, onBeforeMount, onMounted } from "vue";
import { useRoute } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
import request from "../../api/request";
import router from "../../router";
import { useCounterStore } from "../../store/cart";
import { useUserCounterStore } from "../../store/oneselfInfo";
import { storeToRefs } from "pinia";
const store = useCounterStore()
const store2 = useUserCounterStore();
const goToCart = (cake) => {
  store.addCart(cake)
  router.push('/cart')
};
const route = useRoute();

onMounted(() => {
  initData();
});
const state = reactive({
  cake: {},
});
const initData = () => {
  request.post("/cake/getOne", route.query.params).then((res) => {
    if (res.code == 200) {
      state.cake = res.data;
    }
  });
};
const searchClassify = (id) => {
  if (id == 0) {
    state.search.classifyId = "";
    state.currentClassifyIndex = 0;
  } else {
    state.search.classifyId = id;
    state.currentClassifyIndex = id;
  }
  initData();
};
const onesInfo = ref({});
const goToOrder = (cake) => {
  onesInfo.value = store2.getInfo();
  if (onesInfo.value.id == null) {
    ElMessage({
      type: "error",
      message: "先登录",
    });
    let params = "cakeDetail?params="+ route.query.params;
    router.push("/login?params="+ params);
    return false;
  }
  let params = {
    userId: onesInfo.value.id,
    cakeId: route.query.params,
    totalMoney: state.cake.price,
  };
  request.post("/order/add", params).then((res) => {
    if (res.code == 200) {
      router.push("/order");
    }
  });
};
</script>
<style scoped lang="scss">
.info-box {
  // background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}
.detail_info {
  margin: 0 auto;
  padding: 30px;
  width: 65%;
  border: 1px solid #e7e7e7;
  .name {
    font-size: 28px;
    color: #3c2314;
  }
  .cakeDescribe {
    margin-top: 20px;
    color: #3c2314;
  }
  .price {
    color: #3c2314;
    border: 1px solid #c8b49b;
    margin-top: 30px;
    width: 45%;
    text-align: center;
    height: 30px;
    line-height: 30px;
  }
  .btns {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    .car-btn {
      &:hover {
        cursor: pointer;
      }
      width: 45%;
      border: 1px solid #3c2314;
      background-color: #3c2314;
      color: #fbf5dd;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .buy-btn {
      &:hover {
        cursor: pointer;
      }
      width: 45%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      border: 1px solid #e9e9e9;
    }
  }
}
</style>
